import React from 'react';
import {Image} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs';
import HomeIndex from "../pages/home/HomeIndex";
import DiscoverIndex from "../pages/discover/DiscoverIndex";
import UserIndex from "../pages/user/UserIndex";
import {Colors} from "../styles";

function iconStyle(tintColor) {
    return {
        width: 25,
        height: 25,
        tintColor: tintColor
    }
}

const HomeStack = createStackNavigator({
    HomeIndex
});

const DiscoverStack = createStackNavigator({
    DiscoverIndex
});

const UserStack = createStackNavigator({
    UserIndex
});

const TabNavigator = createBottomTabNavigator({
        HomeStack: {
            screen: HomeStack,
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon: ({tintColor, focused}) => (<Image
                    source={focused ? require('../images/tabbar/home-fill.png') : require('../images/tabbar/home.png')}
                    style={iconStyle(tintColor)}
                />)
            }
        },
        FeedStack: {
            screen: DiscoverStack,
            navigationOptions: {
                tabBarLabel: '发现',
                tabBarIcon: ({tintColor, focused}) => (<Image
                    source={focused ? require('../images/tabbar/compass-fill.png') : require('../images/tabbar/compass.png')}
                    style={iconStyle(tintColor)}
                />)
            }
        },
        UserStack: {
            screen: UserStack,
            navigationOptions: {
                tabBarLabel: '我的',
                tabBarIcon: ({tintColor, focused}) => (<Image
                    source={focused ? require('../images/tabbar/my-fill.png') : require('../images/tabbar/my.png')}
                    style={iconStyle(tintColor)}
                />)
            }
        }
    },
    {
        lazy: true,
        tabBarPosition: 'bottom',
        tabBarOptions: {
            activeTintColor: Colors.primary,
            inactiveTintColor: '#777',
            showIcon: true,
            style: {
                backgroundColor: '#fff',
                borderTopWidth: 0.6,
                borderTopColor: '#efefef',
                height: 50,
            },
            indicatorStyle: {
                opacity: 0
            },
            tabStyle: {
                height: 50,
                paddingBottom: 3,
            },
            labelStyle: {
                padding: 0,
                marginTop: 0,
            },
            iconStyle: {
                padding: 0,
                marginBottom: 0,
                marginTop: 5,
                height: 25,
                width: 25,
                position: 'relative'
            }
        }
    });

export default createAppContainer(TabNavigator);
